<template>
  <div>
    <van-pull-refresh v-model="loading" @refresh="onRefresh">
      <div class="top">
        <span
          ><nut-icon
            style="font-size: 20px"
            @click="back"
            name="left"
          ></nut-icon
        ></span>
        <div class="box1"><h3>订单详情</h3></div>
      </div>
      <div class="blank"></div>
      <nut-tabs v-model="state.tab1value">
        <nut-tabpane title="全部">
          <div
            class="orders"
            v-for="(v, i) in datas"
            :key="i"
            @click="particulars(v)"
          >
            <div class="set"></div>
            <div class="one">
              <div class="left">
                <h3>{{ v.trainName }}</h3>
              </div>
              <div class="right" style="color: orange">￥{{ v.priceMsg }}</div>
            </div>
            <div class="one">
              <div class="left">{{ v.carriag }}车{{ v.seatNumber }}号</div>
              <div class="right" style="color: green">
                {{
                  v.status == 1
                    ? "已完成"
                    : v.status == 3
                    ? "已退款"
                    : v.status == 4
                    ? "已取消"
                    : "待支付"
                }}
              </div>
            </div>
            <div class="one">
              <div class="left">{{ v.ticketDate }}</div>
            </div>
            <div class="one">
              <div class="box2"></div>
              <button>删除订单</button>
            </div>
          </div>
          <nut-empty description="无数据"></nut-empty>
        </nut-tabpane>
        <nut-tabpane title="待出行">
          <nut-empty description="无数据"></nut-empty>
        </nut-tabpane>
        <nut-tabpane title="待支付">
          <nut-empty description="无数据"></nut-empty>
        </nut-tabpane>
        <nut-tabpane title="退款/已取消">
          <nut-empty description="无数据"></nut-empty>
        </nut-tabpane> </nut-tabs
    ></van-pull-refresh>
  </div>
</template>
 
 <script lang="ts">
import { reactive, ref } from "vue";
import router from "../../router";
import { api } from "../../api/api";
import { Toast } from "vant";
export default {
  setup() {
    // 返回上一页
    function back() {
      history.go(-1);
    }
    // 判断切换的下标
    const state = reactive({
      tab1value: "0",
    });
    // 下拉刷新
    const count = ref(0);
    const loading = ref(false);
    const onRefresh = () => {
      setTimeout(() => {
        Toast("刷新成功");
        loading.value = false;
        count.value++;
      }, 1000);
    };
    // 获取数据
    const datas = reactive([]);
    api.orderList.gener().catch((err) => {
      Object.assign(datas, err.data);
    });
    function particulars(val: any) {
      console.log(val.Target);
      localStorage.setItem("particulars", JSON.stringify(val));
      router.push("/particulars");
    }
    return {
      state,
      back,
      // 下拉刷新
      count,
      loading,
      onRefresh,
      // 订单
      datas,
      // 详情
      particulars,
    };
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.top {
  width: 100%;
  height: 1.3rem;
  line-height: 1.3rem;
  display: flex;
  background: white;
  position: fixed;
  z-index: 100;
  top: 0;
  .box1 {
    flex: 1;
    text-align: center;
    background: white;
  }
}
.blank {
  height: 1.2rem;
}
.orders {
  width: 94%;
  margin-left: 3%;
  background: white;
  height: 3.6rem;
  margin-top: 2%;
  .set {
    height: .05rem;
    // background: red;
  }
  .one {
    display: flex;
    width: 94%;
    height: .58rem;
    margin-left: 3%;
    margin-top: 2%;
    .left {
      width: 80%;
      margin-left: 2%;
    }
    .box2 {
      width: 78%;
    }
    button {
      width: 1.8rem;
      border: none;
      border-radius: 0.5rem;
      font-size: .28rem;
    }
  }
}
.nut-tabpane {
  background: #eee;
}
// .nut-tabs__titles {
//   background: white;
// }
</style>